<template>
    <div>
        <el-collapse v-model="activeName">
            <el-form :model="tableSechema" ref="tableSechema" label-width="70px" :inline="true">
<!--输入表信息-->
                <el-collapse-item title="表信息" name="1">
                    <el-form-item label="数据库">
                        <el-input v-model="tableSechema.dbName" placeholder="数据库名" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="数据表">
                        <el-input v-model="tableSechema.tableName" placeholder="数据表名" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="注释">
                        <el-input v-model="tableSechema.tableComment" placeholder="表注释" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="行数">
                        <el-input v-model="tableSechema.rowCount" placeholder="需要生成多少条数据" clearable></el-input>
                    </el-form-item>
                </el-collapse-item>
<!--输入字段信息-->
                <el-collapse-item title="字段信息" name="2">
                    <div class="field_view">
                        <el-row v-for="(field,index) in tableSechema.fieldList">
                            <el-descriptions class="margin-top" title="" :column="3" :size="descSize" border>
                                <el-descriptions-item>
                                    <template slot="label">名称</template>
                                    <el-input v-model="field.fieldName" placeholder="字段名称" clearable></el-input>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">类型</template>
                                    <el-input v-model="field.fieldType" placeholder="字段类型" clearable></el-input>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">注释</template>
                                    <el-input v-model="field.fieldComment" placeholder="字段注释" clearable></el-input>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">默认</template>
                                    <el-input v-model="field.defaultValue" placeholder="默认值" clearable></el-input>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">方式</template>
                                    <el-select v-model="field.mockType" placeholder="请选择">
                                        <el-option
                                                v-for="item in typeOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                                :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">参数</template>
                                    <el-select v-model="field.mockParams" placeholder="请选择">
                                        <el-option
                                                v-for="item in paramOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                                :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template slot="label">其他</template>
                                    <el-checkbox v-model="field.primaryKey">主键</el-checkbox>
                                    <el-checkbox v-model="field.autoIncrement">自增</el-checkbox>
                                    <el-checkbox v-model="field.notNull">非空</el-checkbox>
                                    <span style="float:right;margin-right: 10px;">
                                        <el-button type="danger" icon="el-icon-delete"
                                                   @click.prevent="removeField(field)" size="mini" round></el-button>
                                    </span>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-row>
                    </div>
                </el-collapse-item>
<!--操作按钮-->
                <el-form-item style="width: 100%; text-align: center">
                    <el-button type="warning" @click="inputDialog=true">解析</el-button>
                    <el-button type="primary" @click="submitForm(tableSechema)">开始</el-button>
                    <el-button @click="addField()">新增</el-button>
                    <el-button type="primary" @click="upTable">上传</el-button>
                </el-form-item>

<!--解析弹窗-->
                <el-dialog
                        title="输入建表语句"
                        :visible.sync="inputDialog"
                        width="40%"
                        @close="handleClose(bySql)"
                        center>
                    <el-input type="textarea" :rows="24" placeholder="请输入" v-model="bySql.sql"></el-input>
                </el-dialog>

<!-- 结果展示页-->
                <el-collapse-item title="建表语句" name="3">
                    <pre><code v-highlight="sqlTableCore"></code></pre>
                </el-collapse-item>
                <el-collapse-item title="插入语句" name="4">
                    <pre><code v-highlight="sqlDataCore"></code></pre>
                </el-collapse-item>
            </el-form>
        </el-collapse>

<!--更多结果展示-->
        <el-button type="text" @click="drawer = true">查看更多</el-button>
        <el-drawer
                title="我是标题"
                direction="rtl"
                :size="drawerSize"
                :visible.sync="drawer"
                :with-header="false">
            <span></span>
            <div style="padding: 20px">
                <el-tabs v-model="currentTab">
<!--SQL代码                    -->
                    <el-tab-pane label="SQL代码" name="first">
                        <el-collapse v-model="activeName2">
                            <el-collapse-item title="建表语句" name="1">
                                <pre style="margin: 5px"><code v-html="formatTxt(sqlTableCore)"></code></pre>
                                <vue-copy-to-clipboard :text="sqlTableCore" ref="copy">
                                    <el-button type="primary"><i class="el-icon-document-copy"></i>复制</el-button>
                                </vue-copy-to-clipboard>
                            </el-collapse-item>
                            <el-collapse-item title="插入语句" name="2">
                                <pre style="margin: 0"><code v-html="formatTxt(sqlDataCore)"></code></pre>
                                <vue-copy-to-clipboard :text="sqlDataCore" ref="copy">
                                    <el-button type="primary"><i class="el-icon-document-copy"></i>复制</el-button>
                                </vue-copy-to-clipboard>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
<!--JSON代码                    -->
                    <el-tab-pane label="JSON数据" name="second">
                        <pre style="margin: 5px"><code style="max-height: 800px;" v-html="formatTxt(jsonData)"></code></pre>
                        <vue-copy-to-clipboard :text="jsonData" ref="copy">
                            <el-button type="primary"><i class="el-icon-document-copy"></i>复制</el-button>
                        </vue-copy-to-clipboard>
                    </el-tab-pane>
<!--java代码-->
                    <el-tab-pane label="Java代码" name="third">
                        <el-collapse v-model="activeName2">
                            <el-collapse-item title="创建实体类" name="3">
                                <pre style="margin: 5px"><code v-html="formatTxt(javaEntityData)"></code></pre>
                                <vue-copy-to-clipboard :text="javaEntityData" ref="copy">
                                    <el-button type="primary"><i class="el-icon-document-copy"></i>复制</el-button>
                                </vue-copy-to-clipboard>
                            </el-collapse-item>
                            <el-collapse-item title="实例化" name="4">
                                <pre style="margin: 5px"><code v-html="formatTxt(javaObjectData)"></code></pre>
                                <vue-copy-to-clipboard :text="javaObjectData" ref="copy">
                                    <el-button type="primary"><i class="el-icon-document-copy"></i>复制</el-button>
                                </vue-copy-to-clipboard>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>

                    <el-tab-pane label="Typescript代码" name="four">
                        <pre style="margin: 5px"><code style="max-height: 800px;" v-html="formatTxt(typescriptTypeData)"></code></pre>
                        <vue-copy-to-clipboard :text="typescriptTypeData" ref="copy">
                            <el-button type="primary"><i class="el-icon-document-copy"></i>复制</el-button>
                        </vue-copy-to-clipboard>
                    </el-tab-pane>

                </el-tabs>


            </div>

        </el-drawer>

    </div>

</template>


<script>
    import request from "../utils/request";
    import Cookies from "js-cookie";
    import UserView from "./UserView";

    export default {
        name: 'HomeView',
        data() {
            return {
                activeName: ['1', '2'],
                activeName2: ['1', '2', '3', '4'],
                currentTab: 'first',
                inputDialog: false,
                bySql: {
                    serialVersionUID: '3191241716373120793L',
                    sql: ''
                },
                drawer: false,
                drawerSize: "40%",
                formLabelWidth: '80px',
                timer: null,
                typeOptions: [
                    {value: '随机', label: '随机'},
                    {value: '固定', label: '固定'},
                    {value: '递增', label: '递增'},
                    {value: '规则', label: '规则'},
                    {value: '不模拟', label: '不模拟'}
                ],
                paramOptions: [
                    {value: '字符串', label: '字符串'},
                    {value: '人名', label: '人名'},
                    {value: '城市', label: '城市'},
                    {value: '手机号', label: '手机号'},
                    {value: '日期', label: '日期'},
                    {value: '整数', label: '整数'},
                    {value: '小数', label: '小数'},
                    {value: '网址', label: '网址'},
                    {value: '邮箱', label: '邮箱'},
                    {value: 'IP', label: 'IP'},
                    {value: '大学', label: '大学'},
                    {value: '时间戳', label: '时间戳', disabled: true},
                ],
                descSize: 'mini',
                tableSechema: {
                    dbName: '',
                    tableName: '',
                    tableComment: '',
                    rowCount: '',
                    fieldList: [{
                        fieldName: '',
                        fieldType: '',
                        fieldComment: '',
                        defaultValue: '',
                        notNull: false,
                        primaryKey: false,
                        autoIncrement: false,
                        mockType: '',
                        mockParams: ''
                    },]
                },
                tableInfo:{
                    userId:'',
                    name:'',
                    content:'',
                },
                sqlTableCore: '--`示例建表语句`\n' +
                    'create table if not exists `user`\n' +
                    '(\n' +
                    '`username` varchar null comment \'用户姓名\',\n' +
                    '`password` varchar null comment \'密码\',\n' +
                    '`phone` varchar null comment \'联系电话\',\n' +
                    '`date` varchar null comment \'日期\'\n' +
                    ') comment \'`user`\';',
                sqlDataCore: '--`示例插入语句`\n' +
                    'insert into `user` (`username`, `password`, `phone`, `date`) values (\'廖航\', \'z4yY\', \'17668093815\', \'2022-09-23 00:35:32\');\n' +
                    'insert into `user` (`username`, `password`, `phone`, `date`) values (\'白昊天\', \'EkS\', \'15506049703\', \'2022-09-06 19:17:10\');\n' +
                    'insert into `user` (`username`, `password`, `phone`, `date`) values (\'薛耀杰\', \'IP5\', \'15095611051\', \'2022-07-24 20:52:06\');\n' +
                    'insert into `user` (`username`, `password`, `phone`, `date`) values (\'胡思淼\', \'RaR3B\', \'17620021658\', \'2022-03-28 02:46:08\');\n' +
                    'insert into `user` (`username`, `password`, `phone`, `date`) values (\'崔哲瀚\', \'9JJM8\', \'17717875210\', \'2022-09-21 02:45:01\');\n' +
                    'insert into `user` (`username`, `password`, `phone`, `date`) values (\'韦笑愚\', \'URkUr\', \'15699539821\', \'2022-11-30 12:17:47\');',
                jsonData: 'This is a demonstration example\n' +
                    '[\n' +
                    '  {\n' +
                    '    "date": "2022-02-01 15:38:14",\n' +
                    '    "password": "u7",\n' +
                    '    "phone": "17808458602",\n' +
                    '    "username": "石苑博"\n' +
                    '  },\n' +
                    '  {\n' +
                    '    "date": "2022-07-21 17:14:09",\n' +
                    '    "password": "iky",\n' +
                    '    "phone": "17031733147",\n' +
                    '    "username": "贾思源"\n' +
                    '  },\n' +
                    '  {\n' +
                    '    "date": "2022-07-08 10:47:33",\n' +
                    '    "password": "91M",\n' +
                    '    "phone": "15783360778",\n' +
                    '    "username": "傅浩轩"\n' +
                    '  },\n' +
                    '  {\n' +
                    '    "date": "2022-10-31 11:26:40",\n' +
                    '    "password": "IPj",\n' +
                    '    "phone": "17706044917",\n' +
                    '    "username": "卢伟泽"\n' +
                    '  }\n' +
                    ']',
                javaEntityData: 'import lombok.Data;\n' +
                    '\n' +
                    '/**\n' +
                    ' * 这是一个演示案例\n' +
                    ' */\n' +
                    '@Data\n' +
                    'public class User implements Serializable {\n' +
                    '    private static final long serialVersionUID = 1L;\n' +
                    '    //用户姓名\n' +
                    '    private String username;\n' +
                    '    //密码\n' +
                    '    private String password;\n' +
                    '    //联系电话\n' +
                    '    private String phone;\n' +
                    '    //日期\n' +
                    '    private String date;\n' +
                    '\n' +
                    '}',
                javaObjectData: 'User user = new User();\n' +
                    'user.setUsername("石苑博");\n' +
                    'user.setPassword("u7");\n' +
                    'user.setPhone("17808458602");\n' +
                    'user.setDate("2022-02-01 15:38:14");\n',
                typescriptTypeData:''
            };
        },
        mounted() {
            this.$hljs.highlightAll();
        },
        methods: {
            // 更新建表语句
            formatTxt(data) {
                // return '<span class="hljs sql">' + this.sqlTableCore + '</span>';
                return '<code class="hljs">' + data + '</code>';
            },
            //删除字段
            removeField(item) {
                var index = this.tableSechema.fieldList.indexOf(item);
                var length = this.tableSechema.fieldList.length;
                if (length == "1") {
                    // 还有一个的时候提示不能删除
                    this.$message({
                        message: "不能删除了",
                        type: "error",
                    });
                    return false;
                }
                if (index !== -1 && index !== "0") {
                    this.tableSechema.fieldList.splice(index, 1);
                }
            },
            // 添加字段
            addField() {
                this.tableSechema.fieldList.push({
                    fieldName: '',
                    fieldType: '',
                    fieldComment: '',
                    defaultValue: '',
                    notNull: false,
                    primaryKey: false,
                    autoIncrement: false,
                    mockType: '',
                    mockParams: ''
                });
            },
            // 提交表单
            submitForm(data) {
                request.post('/sql/generate/schema', data).then(res => {
                    this.sqlTableCore = res.data.createSql
                    this.sqlDataCore = res.data.insertSql
                    this.jsonData = res.data.dataJson
                    this.javaEntityData = res.data.javaEntityCode
                    this.javaObjectData = res.data.javaObjectCode
                    this.typescriptTypeData=res.data.typescriptTypeCode
                    this.activeName = ['3', '4']
                })
            },
            // 关闭输入框时提交
            handleClose(bySql) {
                request.post('sql/get/schema/sql', bySql).then(res => {
                    if (res.code === 200) {
                        this.tableSechema = res.data
                        this.$message.success('解析成功')
                    }else {
                        this.$message.error('出错了，请重试')
                    }
                })

            },
            //上传表到服务器
            upTable(){
                if (Cookies.get('user')){
                    this.tableInfo.userId=JSON.parse(Cookies.get('user')).id
                    this.tableInfo.name=this.tableSechema.tableName;
                    this.tableInfo.content = JSON.stringify(this.tableSechema)
                    request.post('/table_info/add', this.tableInfo).then(res => {
                        this.$message({message: "上传成功", type: "success"})
                    });
                }else {
                    this.$message({message: "上传失败，请先登录", type: "error"})
                    UserView.methods.toLoginDialog()
                }

            }
        }
    }
</script>
